<template>
	<div class="mainContent">
		<pathTracking :path="Model.path" />
		<div class="container">
			<!-- 一级tabs -->
			<el-tabs v-model="Model.activeTab" @tab-click="onTabChange">
				<el-tab-pane label="盘点单详情" name="1"></el-tab-pane>
			</el-tabs>
			<div class="tabBox">
				<div class="tabBoxHead">
					<p class="tabBoxHeadBtn">开始盘点</p>
					<p class="tabBoxHeadBtn">导出应盘数量</p>
					<p class="tabBoxHeadBtn">保存</p>
					<p class="tabBoxHeadBtn">结束盘点</p>
				</div>
				<div class="tabBoxStep">
					<el-steps :active="Model.stepOption.activeStep">
						<el-step :title="item.title" :description="item.description" v-for="(item,index) in Model.stepOption.step" :key="index"></el-step>
					</el-steps>
				</div>
				<el-row class="detailTable">
					<div class="detailTableItemTitle">
						<span class="detailTableImgSmall"></span>
						<p class="text">盘点单信息</p>
						<img class="detailTableImgNormal" :src="Model.detailTableFrom.src" alt="" @click="toggleTableDetail('detailTableFrom')">
					</div>
					<advancedSearch :option="Model.filterOption" @getChild="getFilterData"></advancedSearch>
				</el-row>
				<div v-show="Model.activeTab==1">
					<el-row class="detailTable">
						<div class="detailTableItemTitle">
							<span class="detailTableImgSmall"></span>
							<p class="text">盘点明细 已盘点数量（{{Model.hasBeentotal}}／{{Model.totalNumber}}）</p>
							<img class="detailTableImgNormal" :src="Model.tab1TableDetail1.src" alt="" @click="toggleTableDetail('tab1TableDetail1')">
						</div>
						<div class="exportBox">
              <div class="exportBoxAuto">
                <div class="exportBoxHand">
                  <el-input placeholder="请输入商品编码" size="small" style="margin: 0 20px;width: 200px;"></el-input>
                  <button class="normalButton bgBtnBrown" >确认</button>
                </div>
              </div>
            </div>
						<div class="detailTableDetail" v-show="Model.tab1TableDetail1.flag">
							<el-table :data="Model.detailData" border style="width: 100%;max-height:550px">
								<el-table-column type="index" width="100" label="行项目号" fixed></el-table-column>
								<el-table-column prop="orderNumber" label="盘点库位" width="120"></el-table-column>
								<el-table-column prop="batchNo" label="商品编码" width="200"></el-table-column>
								<el-table-column prop="description" width="250">
									<template slot="header" slot-scope="scope">
										<el-tooltip content="外观/颜色/净度/切工/3EX-非3EX/钻重" placement="top">
											<span class="iconQuestionmark">描述</span>
										</el-tooltip>
									</template>
								</el-table-column>
								<el-table-column prop="netGoldWeight" label="应盘数量" width="120"></el-table-column>
								<el-table-column prop="netWeight" label="实盘数量" width="120">
									<template slot-scope="scope">
										<input onkeyup="value=value.replace(/[^.\d]/g,'')" v-model="scope.row.id" @change="onEditCount(scope.$index)" class="einput">
									</template>
								</el-table-column>
								<el-table-column prop="remark" label="备注" width="240"></el-table-column>
							</el-table>
						</div>
						<!-- 分页 -->
						<el-row class="pagination-cont">
							<el-pagination @size-change="onTableSizeChange" background @current-change="onTableCurrentChange" :current-page="Model.pager.params.pageIndex"
							:page-sizes="Model.pager.pageSizeArr" :pager-count="5" :page-size="Model.pager.params.pageSize" layout="total, sizes, prev, pager, next, jumper"
							:total="Model.pager.pageTotal"></el-pagination>
						</el-row>
					</el-row>
				</div>
			</div>
		</div>

	</div>
</template>

<script>
import pathTracking from "@/components/common/pathTracking";
import pagination from "@/components/common/pagination.vue";
import advancedSearch from "@/components/common/filter/advancedSearch";
import {
	getDateString
} from "@/assets/js/common.js";
import Model from "./model.js";
import Controller from "./controller.js";
export default {
	name: "purchase",
	mixins: [Model, Controller],
	components: {
		advancedSearch,
		pagination,
		pathTracking
	}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
@import "./index.less";
</style>
